<template>
  <div class="mywrap">
    <div class="box">
      <el-form class="form" label-width="80px">
        <el-form-item label="商品名称：">
          <el-input v-model="goods.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格：">
          <el-input v-model="goods.price"></el-input>
        </el-form-item>
        <el-form-item label="商品类型：">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in goodstypes"
              :key="item.type_name"
              :label="item.type_name"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品简介：">
          <el-input type="textarea" v-model="goods.details"></el-input>
        </el-form-item>

        <div class="upload">
          <el-form-item label="列表图片：">
            <el-upload
              action="/goods/uploadImages"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :multiple="ismultiple"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <el-form-item label="详情图片：">
            <!-- <el-upload
              class="upload-demo"
              action="/goods/uploadImages"
              :on-change="handleChange"
              :file-list="fileList"
              :on-success="detailsHandleAvatarSuccess"
            >
              <el-button class="upBtn" size="small" type="success">点击上传</el-button>
             
            </el-upload>-->
            <el-upload
              action="/goods/uploadImages"
              list-type="picture-card"
              :on-preview="handlePictureCardPreviewdetail"
              :on-remove="handleRemovedetail"
              :on-success="handleSuccessdetail"
             :multiple="ismultiple"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="success" @click="addOne">立即添加</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapActions,
  mapMutations,
  mapGetters
} = createNamespacedHelpers("goodsStore");
export default {
  data() {
    return {
      ismultiple:true,
      value: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      labelPosition: "right",
      goods: {
        name: "",
        price: "",
        details: "",
        typesId: "",
        listImage: [],
        detailImage: []
      },
    //   fileList: [],
      
    };
  },
  computed: {
    //获取所有商品类型
    ...mapState(["goodstypes"])
  },
  mounted() {
    this.getTypesAsync();
  },
  watch: {
    value() {
      this.goods.typesId = this.value;
    }
  },
  methods: {
    //获取所有商品类型
    ...mapActions(["getTypesAsync"]),

    //新增商品
    addOne() {
        console.log(this.goods);
        
      if (
       
        this.goods.fileList != "" &&
        this.goods.name != "" &&
        this.goods.price != "" &&
        this.goods.details != "" &&
        this.goods.typesId != "" 
    
      ) {
        axios.post("/goods/add", this.goods).then(res => {
          (this.fileList = []), (this.imageUrl = "");
        });
      } else {
        this.$message({
          message: "请填完整",
          type: "warning"
        });
      }
    },
    //商品列表图片
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      // console.log(file.url);

      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // handleDownload(file) {
    //   console.log(file);
    // },
    handleSuccess(response, file, fileList) {
      // console.log(response, file, fileList);
      // var imgdata = this.getFileName(response.file[0].path);
      var imgdata = response.filename;
      // console.log(imgdata);
      this.dialogImageUrl = imgdata;
      this.goods.listImage.push(imgdata);
    },




    // 详情图片
    handleRemovedetail(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreviewdetail(file) {
      // console.log(file.url);

      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  
    handleSuccessdetail(response, file, fileList) {
      // console.log(response, file, fileList);
      // var imgdata = this.getFileName(response.file[0].path);
      var imgdata = response.filename;
    //   console.log(imgdata);
      this.dialogImageUrl = imgdata;
      this.goods.detailImage.push(imgdata);
    },

    // 商品详情图片

  }
};
</script>

<style>
.mywrap {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mywrap .box {
  display: flex;
  width: 80%;
}
.mywrap .form {
  text-align: left;
}
.mywrap .el-upload__input {
  display: none !important;
}
.mywrap .el-form-item__label {
  width: 100px !important;
}
.mywrap .el-form-item__content {
  margin-left: 100px !important;
}
.mywrap .upload {
  display: flex;
}
.mywrap .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.mywrap .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.mywrap .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.mywrap .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.mwrap .goBack {
  margin-bottom: 20px;
}
</style>